<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style/css.css" />
    <script type="text/javascript">
      window.onload = function () {
        //创建一个"广州"节点,添加到#city下
        myClick('btn01', function () {
          //创建广州节点 <li>广州</li>
          //创建li元素节点
          /*
           * document.createElement()
           * 	可以用于创建一个元素节点对象，
           * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
           * 	并将创建好的对象作为返回值返回
           */
          var li = document.createElement('li');

          //创建广州文本节点
          /*
           * document.createTextNode()
           * 	可以用来创建一个文本节点对象
           *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
           */
          var gzText = document.createTextNode('广州');

          //将gzText设置li的子节点
          /*
           * appendChild()
           * 	 - 向一个父节点中添加一个新的子节点
           * 	 - 用法：父节点.appendChild(子节点);
           */
          li.appendChild(gzText);

          //获取id为city的节点
          var city = document.getElementById('city');

          //将广州添加到city下
          city.appendChild(li);
        });

        //将"广州"节点插入到#bj前面
        myClick('btn02', function () {
          //创建一个广州
          var li = document.createElement('li');
          var gzText = document.createTextNode('广州');
          li.appendChild(gzText);

          //获取id为bj的节点
          var bj = document.getElementById('bj');

          //获取city
          var city = document.getElementById('city');

          /*
           * insertBefore()
           * 	- 可以在指定的子节点前插入新的子节点
           *  - 语法：
           * 		父节点.insertBefore(新节点,旧节点);
           */
          city.insertBefore(li, bj);
        });

        //使用"广州"节点替换#bj节点
        myClick('btn03', function () {
          //创建一个广州
          var li = document.createElement('li');
          var gzText = document.createTextNode('广州');
          li.appendChild(gzText);

          //获取id为bj的节点
          var bj = document.getElementById('bj');

          //获取city
          var city = document.getElementById('city');

          /*
           * replaceChild()
           * 	- 可以使用指定的子节点替换已有的子节点
           * 	- 语法：父节点.replaceChild(新节点,旧节点);
           */
          city.replaceChild(li, bj);
        });

        //删除#bj节点
        myClick('btn04', function () {
          //获取id为bj的节点
          var bj = document.getElementById('bj');
          //获取city
          var city = document.getElementById('city');

          /*
           * removeChild()
           * 	- 可以删除一个子节点
           * 	- 语法：父节点.removeChild(子节点);
           *
           * 		子节点.parentNode.removeChild(子节点);
           */
          //city.removeChild(bj);

          bj.parentNode.removeChild(bj);
        });

        //读取#city内的HTML代码
        myClick('btn05', function () {
          //获取city
          var city = document.getElementById('city');

          alert(city.innerHTML);
        });

        //设置#bj内的HTML代码
        myClick('btn06', function () {
          //获取bj
          var bj = document.getElementById('bj');
          bj.innerHTML = '昌平';
        });

        myClick('btn07', function () {
          //向city中添加广州
          var city = document.getElementById('city');

          /*
           * 使用innerHTML也可以完成DOM的增删改的相关操作
           * 一般我们会两种方式结合使用
           */
          //city.innerHTML += "<li>广州</li>";

          //创建一个li
          var li = document.createElement('li');
          //向li中设置文本
          li.innerHTML = '广州';
          //将li添加到city中
          city.appendChild(li);
        });
      };

      function myClick(idStr, fun) {
        var btn = document.getElementById(idStr);
        btn.onclick = fun;
      }
    </script>
  </head>
  <body>
    <div id="total">
      <div class="inner">
        <p>你喜欢哪个城市?</p>

        <ul id="city">
          <li id="bj">北京</li>
          <li>上海</li>
          <li>东京</li>
          <li>首尔</li>
        </ul>
      </div>
    </div>
    <div id="btnList">
      <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
      <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
      <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
      <div><button id="btn04">删除#bj节点</button></div>
      <div><button id="btn05">读取#city内的HTML代码</button></div>
      <div><button id="btn06">设置#bj内的HTML代码</button></div>
      <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
    </div>
  </body>
</html>
